<template>
  <div>
    <markdown-it-vue-light class="md-body" :content="markdown" />
  </div>
</template>

<script>
import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
  components: {
    MarkdownItVueLight
  },
  props: ["content"],
  computed: {
    markdown() {
      if (this.content) return this.content;
      return "# Oops! No Content";
    }
  }
};
</script>

<style scoped>
.md-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}
@media (max-width: 767px) {
  .md-body {
    padding: 15px;
  }
}
</style>